<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>
    <style>
        .chat-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            max-width: 300px;
            width: 300px;
            height: 400px;
            overflow-y: auto;
            border: 1px solid #ccc;
            background-color: white;
            z-index: 999;
            transition: all 0.3s ease;
            transform: translateX(100%);
            /* 默认隐藏 */
        }

        .chat-container.show {
            transform: translateX(0);
            /* 显示时恢复位置 */
        }

        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f0f0f0;
        }

        .chat-history {
            padding: 10px;
            height: calc(100% - 80px);
            overflow-y: auto;
        }

        .chat-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
        #chatHistory {
            height: 250px;
            overflow-y: scroll;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .message {
            margin: 10px 0;
        }
        .user {
            text-align: right;
        }
        .ai {
            text-align: left;
        }
        #userInput {
            width: 100%;
            padding: 10px;
            margin-top: 20px;
            box-sizing: border-box;
        }
        #sendButton {
            display: block;
            margin-top: 10px;
        }
    </style>
    <%@include file="./common/header.jsp"%>
</head>
<body>
<jsp:include page="./common/nav.jsp">
    <jsp:param name="backgroud" value="/img/service/top-service.jpg"/>
</jsp:include>
<c:if test="${loginSuccess && loginSuccess!=null}">
    <script type="text/javascript">
        alert("${message}");
    </script>
</c:if>
<c:if test="${not loginSuccess&& loginSuccess!=null}">
    <script type="text/javascript">
        alert("${message}");
    </script>
</c:if>
<div class="main">
    <div class="container tim-container">
        <div id="images">
            <form id="petForm"  action="${pageContext.request.contextPath}/dogsDetails.action">
            <div class="coo-title" style="display: flex; justify-content: space-between;">
                <div style="margin-right: auto;">
                    <h3>热门宠物 <small> 请选择您的心意宠物 </small></h3>
                </div>
                <select id="skills"  class="form-control form-control-placeholder" style="width: 200px;height: 50px" name="petdetail" onchange="updateFormAction(this)">
                    <option value="363" data-action="${pageContext.request.contextPath}/dogsDetails.action">热门卷毛比熊犬</option>
                    <option value="358" data-action="${pageContext.request.contextPath}/dogsDetails.action">热门柴犬</option>
                    <option value="357" data-action="${pageContext.request.contextPath}/dogsDetails.action">爆款边境牧羊犬</option>
                    <option value="354" data-action="${pageContext.request.contextPath}/dogsDetails.action">爆款约克夏犬</option>
                    <option value="331" data-action="${pageContext.request.contextPath}/dogsDetails.action">爆款巴哥</option>
                    <option value="302" data-action="${pageContext.request.contextPath}/dogsDetails.action">爆款玩具贵宾犬</option>
                    <option value="433" data-action="${pageContext.request.contextPath}/catsDetails.action">爆款玳瑁</option>
                    <option value="337" data-action="${pageContext.request.contextPath}/catsDetails.action">热门金渐层猫</option>
                    <option value="337" data-action="${pageContext.request.contextPath}/catsDetails.action">热门中华田园橘</option>
                    <option value="320" data-action="${pageContext.request.contextPath}/catsDetails.action">热门布偶猫</option>
                    <option value="246" data-action="${pageContext.request.contextPath}/catsDetails.action">热门英国短毛猫</option>
                    <option value="268" data-action="${pageContext.request.contextPath}/catsDetails.action">热门德文卷毛猫</option>
                    <option value="317" data-action="${pageContext.request.contextPath}/catsDetails.action">热门拿破仑猫</option>
                </select>
                <button type="submit" class="btn btn-coo-blue btn-tooltip" style="width: 100px;height: 50px">搜索</button>
            </div>
            </form>
            <div class="row">

                <c:forEach items="${index_petsList}" var="pets">

                    <div class="col-md-3 col-sm-6 text-center">
                        <h4 class="coo-text-green">${pets.name}</h4>
                        <img src="${pageContext.request.contextPath}${pets.imagePath}"
                                                                       alt="No.${pets.queryNumber} pet image" class="img-circle img-responsive">
                        <div class="space-30"></div>
                        <table class="tbl-pet">
                            <tbody>
                            <tr>
                                <th>查询号码</th>
                                <td>${pets.queryNumber}</td>
                            </tr>
                            <tr>
                                <th>性別</th>
                                <td>${pets.gender}</td>
                            </tr>
                            <tr>
                                <th>生日</th>
                                <td>${pets.birthday}</td>
                            </tr>
                            <tr>
                                <th>价格</th>
                                <td>${pets.price}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="btn-pet">

                            <button  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href='${pageContext.request.contextPath}/dogsDetails.action?petdetail=${pets.queryNumber}'"  >点击详情 »</button>
                            <div class="tooltip fade right in" style="top: 550px; left: 180px; display: block;"><div class="tooltip-arrow" style=""></div><div class="tooltip-inner">点我进入详情~</div></div>
                        </div>
                    </div>

                </c:forEach>


            </div>
            <div class="space-30"></div>

            <div class="text-center">
                <p class="coo-text-brown">想买狗狗或者买猫猫的顾客，<br>请按下面的按钮搜索您喜欢的宠物</p>
            </div>
            <div class="space-30"></div>

            <div class="row" id="buttons">
                <div class="col-sm-6 text-center">
                    <button onclick="window.location.href='${pageContext.request.contextPath}/moredogs.action'" class="btn btn-block btn-lg btn-fill btn-coo-pink btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Let's search">搜索其他狗狗</button>
                </div>
                <div class="col-sm-6 text-center">
                    <button onclick="window.location.href='${pageContext.request.contextPath}/morecats.action'" class="btn btn-block btn-lg btn-fill btn-coo-orange btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Let's search">搜索其他猫猫</button>
                </div>
            </div>
        </div><!-- end new faces -->

        <div class="space-30"></div>

        <div class="container tim-container">
            <section id="new">
                <div class="coo-title">
                    <h3>最新信息<small> News </small></h3>
                </div>
                <ul>
                    <li class="coo-news">
                        <span>NEWS</span>
                        <time datetime="2024-07-15 ">[ 2024-07-15  ]</time>
                        <p class="new">开始营业全场特惠!!!<br>
                            即日起至7月30日，购买店内宠物立减500元！老师免费挑选！！</p>
                    </li>
                    <li class="coo-news">
                        <span>NEWS</span>
                        <time datetime="2024-07-07">[ 2024-07-14 ]</time>
                        <p>马上放假啦，奶奶家的鸡鸭鹅该遭罪啦！！！预祝各位暑假快乐！！！阳光彩虹小白马滴滴答滴滴答~~~</p>
                    </li>
                    <li class="coo-news">
                        <span>NEWS</span>
                        <time datetime="2024-07-07">[ 2024-07-07 ]</time>
                        <p>新青年宠物店主页精修采用 Bootstrap 构建快速、响应式布局的网站，让美化做到极致。</p>
                    </li>
                    <li class="coo-news">
                        <span>OPEN</span>
                        <time datetime="2024-07-03">[ 2024-07-03 ]</time>
                        <p>新青年宠物店主页开通。</p>
                    </li>
                    <li class="coo-news">
                        <span>OPEN</span>
                        <time datetime="2024-07-01">[ 2024-07-01 ]</time>
                        <p>新青年宠物店需求文档构建完毕。</p>
                    </li>
                </ul>
            </section>
        </div><!-- end news -->
    </div>
    <div class="space-30"></div>
</div>
<div class="main coo-bg-light">
    <div class="container">
        <div class="coo-title">
            <h3 class="text-center">我们的理念<br><small>Concept</small></h3>
        </div>
        <section class="concept">
            <p>新青年宠物是一家照料宠物生命，拥有与众不同的重大责任的企业。希望通过我们的努力，能让更多的客户体验到迎接新家庭成员的喜悦。因此，新青年宠物立下三项承诺。</p>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="${pageContext.request.contextPath}/img/love-pet_170.png">
                        <div class="caption">
                            <h5 class="coo-text-brown">让客户安心购买<i class="fa fa-heart heart" alt="love"></i></h5>
                            <p>我们承诺给您健康的狗狗和猫咪。并且，我们独特的售后服务会让您没有后顾之忧。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="${pageContext.request.contextPath}/img/search_170.png">
                        <div class="caption">
                            <h5 class="coo-text-brown">易于搜索的网站<i class="fa fa-search search" alt="search"></i></h5>
                            <p>每只爱宠都有自己独特的性格和外表。我们的网站能让您找到和您有缘的那只。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="${pageContext.request.contextPath}/img/move_170.png">
                        <div class="caption">
                            <h5 class="coo-text-brown">世界上独一无二的！<i class="fa fa-gift gift" alt="gift"></i></h5>
                            <p>我们会将您的新家庭成员，送到离您最近的新青年宠物店铺，方便您的迎接。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="main">
    <div class="container">
        <div class="coo-title">
            <h3>服务内容 <small> Our service </small></h3>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="${pageContext.request.contextPath}/img/service/icon_trimming.png">
                    <div class="caption">
                        <h5 class="coo-text-green">宠物美容</h5>
                        <p class="coo-text-lightbrown">专业工作人员使用精心挑选的洗发水为爱宠提供美容服务，让她拥有健康干净的皮毛。</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="${pageContext.request.contextPath}/img/service/icon_hotel.png">
                    <div class="caption">
                        <h5 class="coo-text-pink">宠物酒店</h5>
                        <p class="coo-text-lightbrown">请放心的将您的爱宠寄养在我们的宠物酒店。我们会每天进行健康检查，定期带爱宠散步。</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="${pageContext.request.contextPath}/img/service/icon_catcafe.png">
                    <div class="caption">
                        <h5 class="coo-text-orange">猫咖啡馆</h5>
                        <p class="coo-text-lightbrown">因为各种环境因素而不能养宠物的朋，请来我们的猫咖啡和猫咪共度悠闲时光，过足撸猫瘾。</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="${pageContext.request.contextPath}/img/service/icon_dogpark.png">
                    <div class="caption">
                        <h5 class="coo-text-yellow">狗狗公园</h5>
                        <p class="coo-text-lightbrown">免费为新青年宠物店会员开放的宠物公园的介绍。我们一直为您的狗狗健康加油。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="space-30"></div>
</div>
<div class="main coo-bg-light">
    <div class="container">
        <div class="coo-title">
            <h1 class="text-center"><small class=" coo-text-brown">新青年宠物店</small></h1>
        </div>
        <hr>
        <div id="extras">
            <div class="row">
                <div class="col-md-5 order-md-1">
                    <div class="text-center">
                        <img src="${pageContext.request.contextPath}/img/chinesestores.jpg" alt="新青年宠物店舗地図" class="img-rounded img-responsive img-dog">
                    </div>
                </div>
                <div class="col-md-7 order-md-2">
                    <p class="lead">新青年宠物店是软件10班赵纬和洪树军的大二小学期项目大作业。</p>
                    <p>
                        <a href="" class="btn btn-coo-brown btn-fill btn-md" role="button">赵纬和洪树军大作业 点我回到顶部 »</a>
                    </p>
                    <br>
                    <p class="lead">新青年宠物店每一个设计都是精挑细选。</p>
                    <div class="row mb-3">
                        <div class="pull-left">
                            <a href="" class="btn btn-coo-orange btn-fill btn-md btn-tooltip ml-1" role="button" data-toggle="tooltip" data-placement="top" title="" data-original-title="View detail">新青年宠物店精选宠物 点我回到顶部  »</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="space-30"></div>
</div>
<div class="container chat-container">
    <div class="chat-header">
        <span>ChatGPT6.0宠物店管家</span>
        <button class="toggle-chat-button btn btn-coo-blue btn-tooltip" >点我隐藏</button>
    </div>
    <div id="chatHistory" class="chat-history">
        <!-- AI 或 用户的消息将在这里显示 -->
    </div>
    <div class="chat-input">
        <input type="text" id="userInput" placeholder="输入您想提问的问题...">
        <button id="sendButton" type="submit" class="btn btn-coo-blue btn-tooltip">发送</button>
    </div>
</div>
<%@include file="./common/footer.jsp"%>
<%@include file="./common/js.jsp"%>
<script>
    document.getElementById('sendButton').addEventListener('click', function () {
        var userInput = document.getElementById('userInput');
        var userMessage = userInput.value.trim();
        if (userMessage !== '') {
            addMessage('user', userMessage);
            userInput.value = '';
            // 这里你可以调用你的AI接口来获取响应
            setTimeout(function () {
                var aiResponse = generateAIResponse(userMessage); // 这个函数需要你实现
                addMessage('ai', aiResponse);
            }, 1000);
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        addMessage('ai', "ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！");
    });
    function addMessage(sender, message) {
        var chatHistory = document.getElementById('chatHistory');
        var messageDiv = document.createElement('div');
        messageDiv.className = sender;
        messageDiv.textContent = message;
        chatHistory.appendChild(messageDiv);
        chatHistory.scrollTop = chatHistory.scrollHeight; // 自动滚动到底部
    }

    function generateAIResponse(userMessage) {
        // 这里应该有你的AI逻辑来生成响应
        // 为了演示，我们只是简单地返回用户消息加上 "AI says:"
        if(userMessage === "你好" || userMessage === "hello"){
            return "ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！";
        }else if (userMessage === "给我推荐一个宠物" ||userMessage ==="给我推荐宠物" ||userMessage==="推荐宠物") {
            return "ChatGPT6.0宠物店管家:  !欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，这里给您推荐首页热门的卷毛比熊犬，是镇店之宝卖的非常好！！价格限时减免500元！欢迎选购";
        }else if(userMessage ===""){
            return "ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！";
        }else{
            return "ChatGPT6.0宠物店管家: " + "您询问的问题" + "(" + userMessage + ")" + "需要您亲自联系店长赵纬和洪树军进行提问，ChatGPT6.0宠物店管家暂时无法帮助您，谢谢您的提问！~~";
        }

    }
    window.addEventListener('DOMContentLoaded', function () {
        const container = document.querySelector('.chat-container');
        container.classList.add('show');
    });
    document.querySelector('.toggle-chat-button').addEventListener('click', function () {
        const container = document.querySelector('.chat-container');
        container.classList.toggle('show');
    });
    function updateFormAction(selectElement) {
        const form = document.getElementById('petForm');
        form.action = selectElement.options[selectElement.selectedIndex].getAttribute('data-action');
    }

</script>
</body>
</html>